<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变色盒子</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        #box{
            height: 1000px;
            width: 1000px;
            border-radius: 35px;
            border: 1px solid black;
            margin: auto;
        }
        #box > div > div{
            float: left;
            height: 40px;
            width: 250px;
            margin: 5%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        // fragment 创建1个文档碎片(假容器，自动回收)
        let oDivBox = document.querySelector('#box'),
            divWrap = document.createElement("div")
        //点击网页文档，往box内添加随机颜色的盒子
        document.documentElement.onclick = function(){
            for(let i = 0;i < 100; ++i){
                let div = document.createElement("div"),
                    colorRgb = getRandomColor()
                div.style.backgroundColor = colorRgb
                div.innerText = "这是盒子"
                //添加
                divWrap.appendChild(div)
            }
            oDivBox.appendChild(divWrap)
        }
        //随机色获取方法
        function getRandomColor() {
            let r = Math.floor(Math.random()*256),
                g = Math.floor(Math.random()*256),
                b = Math.floor(Math.random()*256)
            return `rgb(${r},${g},${b})`
        }
    </script>
</body>
</html>